<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	span {
		font-size: 12px; 
	}
</style>
</head>
<!-- Bootstrap -->
<link href="${pageContext.request.contextPath}/javascript/bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/javascript/table/bootstrap-table.css">
<script src="${pageContext.request.contextPath}/javascript/jQuery-1.12.4.js"></script>
<script src="${pageContext.request.contextPath}/javascript/bootstrap/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/javascript/table/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/javascript/table/locale/bootstrap-table-zh-CN.js"></script>
<body>
	<h3>添加商品</h3>
	<form id="myForm" action="productServlet?op=doAddProduct" method="post">
		<table class="table table-hover" >
			<tr>
				<td style="width:200px;">商品名称</td>
				<td style="width:240px;">
					<input class="form-control"  type="text" id="proName" name="proName" onblur="checkProName(this,2)" />
				</td>
				<td>
					<span class="help-block" id="sProName"></span>
				</td>
			</tr>
			<tr>
				<td>进价</td>
				<td>
					<input class="form-control" style="width:240px;" type="text" id="incomePrice" name="incomePrice" onblur="checkIncomePrice(this,0)"/>
				</td>
				<td>
					<span id="sIncomePrice"></span>
				</td>
			</tr>
			<tr>
				<td>数量</td>
				<td>
					<input class="form-control" style="width:240px;" type="number" id="quantity" name="quantity" onblur="checkQuantity(this,1)" />
				</td>
				<td>
					<span id="sQuantity"></span>
				</td>
			</tr>
			<tr>
				<td>售价</td>
				<td>
					<input class="form-control" style="width:240px;" type="text" id="salesPrice" name="salesPrice" onblur="checkSalesPrice(this,0)" />
				</td>
				<td>
					<span id="sSalesPrice"></span>
				</td>
			</tr>
			<tr>
				<td>类别</td>
				<td>
					<select class="form-control" style="width:240px;" id="categoryId" name="categoryId" onblur="checkCategoryId(this)">
						<option value="0">- 请选择商品类别 -</option>
						<c:forEach items="${cateList}" var="cate">
							<option value="${cate.categoryId}">${cate.categoryName}</option>
						</c:forEach>
					</select>
				</td>
				<td>
					<span id="sCategoryId"></span>
				</td>
			</tr>
			<tr>
				<td>供应商</td>
				<td>
					<select class="form-control" style="width:240px;" id="providerId" name="providerId" onblur="checkProviderId(this)">
						<option value="0">- 请选择供应商 -</option>
						<c:forEach items="${proList}" var="pro">
							<option value="${pro.providerId}">${pro.providerName}</option>
						</c:forEach>
					</select>
				</td>
				<td>
					<span id="sProviderId"></span>
				</td>
			</tr>
			<!-- <tr>
				<td>进货时间</td>
				<td>
					<input type="text" name="incomeTime" onclick="WdatePicker()" />
				</td>
			</tr> -->
			<tr>
				<td colspan="3">
					<input class="btn btn-success" type="button" value="确定增加" onclick="checkDate()" /> 
					<input class="btn btn-info" type="reset" value="重置" />
				</td>
			</tr>


		</table>

	</form>

</body>

<script>

	//获取到xmlHttpRequest 对象
	var xmlhttp;
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

	// 简化数据 value 获取
	function $(id) {
		return document.getElementById(id);
	}

	// 使用正则表达式 校验数据
	function regCheck(str, index) {
		var arr = [
				/^[0-9]+(\.[0-9]+)?$/, // 包含小数的正数
				/^[0-9]+$/, // 数字(整数)
				/^\s*$/, // 匹配空格
				// 匹配时间(已考虑润年) -- 格式 ("yyyy-MM-dd")
				/^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/ ];
		return arr[index].test(str);
	}

	// 正则表达式 校验 商品名称
	function checkProName(obj, index) {

		var proName = $("proName").value;
		var s_name = $("sProName");
		var f = regCheck(obj.value, index);
		// alert(f+" -- 判断是否为空! true : 空  / false : 非空");
		if (f) {
			s_name.innerHTML = "<font color='red'> × 名称不能为空.</font>";
		} else {
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					var msg = xmlhttp.responseText;
					if (msg == "可用") {
						s_name.innerHTML = "<font color='green'> √ </font>";
					} else if (msg == "重名") {
						s_name.innerHTML = "<font color='red'> × 名称已存在.</font>";
					}
				}
			}
			xmlhttp.open("GET", "productServlet?op=checkProductNameByAdd&proName="+proName,true);
			xmlhttp.send();
		}
		return f;
	}

	// 正则表达式 校验 进价
	function checkIncomePrice(obj, index) {
		var s_incomePrice = $("sIncomePrice");
		var f = regCheck(obj.value, index);
		if (f) {
			s_incomePrice.innerHTML = "<font color='green'> √ </font>";
		} else {
			s_incomePrice.innerHTML = "<font color='red'> × 进价格式不正确.</font>";
		}
		return f;
	}

	// 正则表达式 校验 数量
	function checkQuantity(obj, index) {
		var s_quantity = $("sQuantity");
		var f = regCheck(obj.value, index);
		if (f) {
			s_quantity.innerHTML = "<font color='green'> √ </font>";
		} else {
			s_quantity.innerHTML = "<font color='red'> × 数量格式不正确.</font>";
		}
		return f;
	}

	// 正则表达式 检验 售价
	function checkSalesPrice(obj, index) {
		var s_salesPrice = $("sSalesPrice");
		var f = regCheck(obj.value, index);
		if (f) {
			s_salesPrice.innerHTML = "<font color='green'> √ </font>";
		} else {
			s_salesPrice.innerHTML = "<font color='red'> × 售价格式不正确.</font>";
		}
		return f;
	}

	// 验证类别是否选中
	function checkCategoryId(obj) {
		// alert(obj.value);
		var f = false;
		var s_cateId = $("sCategoryId");
		if (obj.value == 0) {
			s_cateId.innerHTML = "<font color='red'> × 请选择商品类别.</font>";
		} else {
			s_cateId.innerHTML = "";
			f = true;
		}
		return f;
	}

	// 验证供应商是否选中
	function checkProviderId(obj) {
		// alert(obj.value);
		var f = false;
		var s_provId = $("sProviderId");
		if (obj.value == 0) {
			s_provId.innerHTML = "<font color='red'> × 请选择供应商.</font>";
		} else {
			s_provId.innerHTML = "";
			f = true;
		}
		return f;
	}

	// 检查提交数据
	function checkDate() {

		var proName = $("proName");
		var incomePrice = $("incomePrice");
		var quantity = $("quantity");
		var salesPrice = $("salesPrice");
		var myForm = $("myForm");
		var cateId = $("categoryId");
		var provId = $("providerId");

		if (!(regCheck(proName.value, 2)) && regCheck(incomePrice.value, 0)
				&& regCheck(quantity.value, 1) && regCheck(salesPrice.value, 0)
				&& checkCategoryId(cateId) && checkProviderId(provId)) {
			// alert("提交!");
			myForm.submit();
		} else {
			alert("有数据未正确填写或选择!");
		}

	}
</script>

</html>